<template>
    <!-- <div class="behavior-log"> -->
      <!-- 导航 -->
      <!-- <tz-breadcrumb  :pathArr='[{"name": "日志管理"},{"name": "行为日志", "url": "/behaviorLog"}]'></tz-breadcrumb> -->
      
    <!-- </div> -->
    <div class="ordinaryOrder-ordinaryOrderDetails">
      <!-- 导航 -->
      <tz-breadcrumb  :pathArr='[{"name": "日志管理"},{"name": "行为日志", "url": "/behaviorLog"},{"name": "行为日志详情", "url": "/behavior-log-detail"}]'></tz-breadcrumb>
      <!-- 数据表单 -->
      <div style="margin: 20px;"></div>
      <el-row :gutter="20">
        <el-col :span="12">
          <!-- <el-table :data="orderData" stripe style="width: 100%">
            <el-table-column prop="name" label="名称" ></el-table-column>
            <el-table-column prop="value" label="值" > </el-table-column>
          </el-table> -->
           <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>行为日志请求内容</span>
            </div>
            <div class="text" v-loading="threeApiLoading">
              <pre class="pie">{{threeApi == '' ? '暂无数据' : threeApi}}</pre>
            </div>
          </el-card>
        </el-col>
        <!-- <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>返回内容</span>
            </div>
            <div class="text" v-loading="threeApiLoading2">
              <pre class="pie">{{threeApi2 == '' ? '暂无数据' : threeApi2}}</pre>
            </div>
          </el-card>
        </el-col> -->
      </el-row>
      <!-- <el-row :gutter="20" class="mt20">
        <el-col :span="12">
          <el-table :data="orderData" stripe style="width: 100%">
            <el-table-column prop="name" label="名称" ></el-table-column>
            <el-table-column prop="value" label="值" > </el-table-column>
          </el-table> 
           <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>其他内容</span>
            </div>
            <div class="text" v-loading="threeApiLoading3">
              <pre class="pie">{{threeApi3 == '' ? '暂无数据' : threeApi3}}</pre>
            </div>
          </el-card>
        </el-col>
      </el-row> -->
    </div>
</template>

<script>
import api from './../../api/api';
import http from './../../config/index';
// import { msToDate } from './../../controller/common';
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb.vue';
export default {
  data () {
    return {
      threeApi: '',
      threeApiLoading: true
    };
  },
  components: {
    'tz-breadcrumb': tzBreadcrumb
  },
  methods: {
    getDetailInfo () {
      var that = this;
      http.get(api.behaviorLogDetails, {
        token: localStorage.getItem('token'),
        id: this.$route.query.id
      }, response => {
        that.threeApiLoading = !that.threeApiLoading;
        console.log(response);
        if (response.code === '10001' && response.status === 'SUCCESS') {
          that.threeApi = JSON.stringify(response.data[0], null, 4);
        };
      }, (err) => {
        that.threeApiLoading = !that.threeApiLoading;
        console.log(err);
      });
    }
  },
  mounted () {
    this.getDetailInfo();
  }
};
</script>

<style lang="stylus" scoped>
.behavior-log
  .form
    padding: 2rem
    margin-top: 15px
    margin-bottom: 12px
    box-sizing: border-box
    background: #fff
    box-shadow: 1px 1px 1px #999
    .form-item
      display: inline-block
      margin-right: 35px
      margin-bottom: 0
      label
        font-size: 14px
        color: #333
        width: 70px
        display: inline-block
      .time
        width: 200px
.mt20
  margin-top: 20px
.pie {
  background-color: rgba(64,158,255,0.1);
  padding: 0 10px;
  line-height: 30px;
  font-size: 12px;
  color: #409eff;
  border-radius: 4px;
  box-sizing: border-box;
  border: 1px solid rgba(64,158,255,0.2);
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>
